$(function () {
    /*
        进入页面获取数据，渲染页面
        
    */
    render();

    // 查询数据
    $('.search').click(function () {
        const heroName = $('.form-control').val();
        render(heroName);
    })

    // 添加数据
    $('#addHero').click(function () {
        $('#myModal').on('shown.bs.modal', function (e) {
            // 提交按钮
            $('#submitBtn').click(function () {
                const name = $.trim($("#hero_name").val());
                const gender = $.trim($("#selectGender").val());
                // console.log(name, gender);
                if (name != '') {
                    $.post('http://127.0.0.1:3001/addHero', {
                        name,
                        gender,
                        img: "http://127.0.0.1:3001/assets/uploads/upload_7c7d7b3b30906cdb2bd241162075db82.jpg"
                    }, res => {
                        console.log(res)
                        render();
                        $('#myModal').modal('hide');

                        $("#hero_name").val('');
                        $("#selectGender").val('男');
                    })
                } else {
                    alert("英雄名称不能为空");
                    return false;
                }
            })

            // 取消按钮
            $('#closeBtn').click(function () {
                $('#myInput').focus()
            })
        })
    })


    // 删除数据
    $('#main-tbl tbody').on('click', '.delBtn', function (e) {
        // const id = e.target.dataset.id;
        if (confirm("您确定要删除此项内容吗?")) {
            const id = $(e.target).data('id');
            $.get('http://127.0.0.1:3001/delHeroById', {
                id
            }, res => {
                console.log(res)
                render();
            })
        }
    })

    // 上传照片
    $('#main-tbl tbody').on('click', '#addImgBtn', function () {
        const id = this.dataset.id;
        $('#uploadFile').modal('show');
        $("#hero_img").change(function () {
            const formData = new FormData();
            const file = this.files[0];
            formData.append('file_data', file);

            // 发请求上传图片
            $.ajax({
                url: 'http://127.0.0.1:3001/uploadFile',
                type: 'post',
                data: formData,
                contentType: false, //告诉服务器，这个是文件
                processData: false, //告诉jq，这个是文件
                success: res => {
                    console.log(res)
                    if (res.code == 200) {
                        // 上传成功，修改头像,根据id获取当前的英雄数据
                        $.post('http://127.0.0.1:3001/updateHero', {
                            id,
                            img: res.src
                        }, res => {
                            if (res.code == 200) {
                                render();
                                $('#uploadFile').modal('hide');
                            }
                        })
                    }
                }
            })
        });
    })

    function render(heroName = "") {
        $.get('http://127.0.0.1:3001/getHeroList', {
            heroName
        }, res => {
            console.log(res.data)
            // 调用render
            let str = '';
            res.data.forEach(item => {
                str +=
                    `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.gender}</td>
                    <td><img src="${item.img}" alt=""></td>
                    <td>
                        <input id="addImg" type="file" style="display:none" />
                        <button id="addImgBtn" class="btn btn-warning" data-id=${item.id}>上传头像</button>
                        <button class="btn btn-danger delBtn" data-id=${item.id}>删除</button>
                    </td>
                </tr>
            `
            })
            $('#main-tbl tbody').html(str);
        })

    }
})